<template>
  <HeaderTop />
  <div class="flex bg-gray-400">
    <div>
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="var(--el-color-white)"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          unique-opened
      >
        <el-sub-menu :index="`${ind+1}`" v-for="(item,ind) in navs">
          <template #title><el-icon><component :is="item.icon" /></el-icon><span>{{ item.label }}</span></template>
          <el-menu-item :index="`${ind+1}-${subInd+1}`" v-for="(sub,subInd) in item.children"><NuxtLink :to="item.path+sub.path">{{ sub.label }}</NuxtLink></el-menu-item>
        </el-sub-menu>
      </el-menu>
      <div class="trapezoid text-sm" @click="isCollapse=!isCollapse" :style="{left:isCollapse?'64px':'200px'}">
        {{isCollapse?'展开':'折叠'}}
      </div>
    </div>
    <slot></slot>
  </div>



</template>

<script lang="ts" setup>
import {ShoppingCart} from "@element-plus/icons-vue";
const navs=shallowRef([
  {
    label:'账号管理',
    icon:ElIconUser,
    path:'/admin/user',
    children:[
        {
      label:'我的账户',
      path:'',
    },{
        label:'账号安全',
        path:'/save',
      }
      ,{
        label:'认证中心',
        path:'/authentication',
      }
      ,{
        label:'操作保护',
        path:'/protect',
      }
    ]
  },
  {
    label:'财务管理',
    icon:ElIconCreditCard,
    path:'/admin/finance',
    children:[
      {
        label:'在线充值',
        path:'/money',
      },{
        label:'资金明细',
        path:'/detail',
      }
      ,{
        label:'我要结算',
        path:'/settlement',
      }
      ,{
        label:'申请发票',
        path:'/picker',
      }
    ]
  },
  {
    label:'域名管理',
    icon:ElIconWallet,
    path:'/admin/domainAdmin',
    children:[
      {
        label:'注册域名',
        path:'',
      },{
        label:'我的域名',
        path:'/domain',
      }
      ,{
        label:'模版管理',
        path:'/template',
      }
      ,{
        label:'PUSH域名',
        path:'/push',
      }
      ,{
        label:'交换域名',
        path:'/toggle',
      }
      ,{
        label:'续费域名',
        path:'/renew',
      }
      ,{
        label:'转入域名',
        path:'/turnIn',
      }
      ,{
        label:'转出域名',
        path:'/turnOut',
      }
      ,{
        label:'外部域名入库',
        path:'/inDatabase',
      }
      ,{
        label:'批量操作',
        path:'/batchActions',
      }
    ]
  },
  {
    label:'卖家',
    icon:ElIconShop,
    path:'/admin',
    children:[
      {
        label:'我要卖域名',
        path:'/sell?tab=0',
      },{
        label:'正在出售域名',
        path:'/sell?tab=1',
      }
      ,{
        label:'已下架域名',
        path:'/sell?tab=2',
      }
      ,{
        label:'已经出售域名',
        path:'/sell?tab=3',
      }
      ,{
        label:'出售域名统计',
        path:'/sell?tab=4',
      }
      ,{
        label:'商铺设置',
        path:'/sell?tab=5',
      }
      ,{
        label:'域名出售页',
        path:'/sell/sell',
      }
    ]
  },
  {
    label:'代卖',
    icon:ElIconShop,
    path:'/admin/sell',
    children:[
      {
        label:'发布代卖',
        path:'/agent?tab=0',
      },{
        label:'域名列表',
        path:'/agent?tab=1',
      }
      ,{
        label:'购买列表',
        path:'/agent?tab=2',
      }
      ,{
        label:'自己发布的域名',
        path:'/agent?tab=4',
      }
    ]
  },
  {
    label:'买家',
    icon:ElIconShoppingCart,
    path:'/admin',
    children:[
      {
        label:'批量购买域名',
        path:'/buy',
      },{
        label:'已购买的域名',
        path:'/buy?tab=1',
      }
      ,{
        label:'我关注的域名',
        path:'/buy?tab=2',
      }
      ,{
        label:'我收藏的店铺',
        path:'/buy?tab=3',
      }
    ]
},
  {
    label:'系统',
    icon:ElIconSetting,
    path:'/admin',
    children:[
      {
        label:'系统公告',
        path:'/notice',
      },
    ]
  },
])

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.trapezoid {
  color: var(--el-color-white);
  position: absolute;
  width: 20px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  top:calc((100vh - 91px)/2);
  transition: left 300ms ease-in-out;
  &:after{
    width: 20px; /* 设置容器宽度 */
    height: 50px; /* 设置容器高度 */
    background-color: #545c64; /* 设置容器颜色 */
    position: absolute;
    content: '';
    left: 0;
    top:0;
    transform:perspective(10px) rotateY(12deg) ;
    z-index:-1;
  }
}
.menu-box{
  display: flex;
  align-items: center;

}
.el-menu-vertical-demo{
  height:calc(100vh - 91px);
  overflow: auto;
  position: relative;
  border-right-width:0;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}

</style>
